<template>
	<view style="overflow: hidden;">
		<view class="tabs">
			<u-tabs :list="list2" @click="tabs_click2" :scrollable="false" lineColor="#333" :inactiveStyle="{
					color: '##626262',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}" :activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					FontSize:'30rpx'
					
				}" lineHeight="2" lineWidth="18"></u-tabs>
		</view>
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower" :style="{height:scrollH+'px'}">
			<view v-if="list.length==0" style="padding-top: 300rpx;" class="">
				<u-empty text="列表数据为空" mode="list"></u-empty>
			</view>
			<view class="" v-for="(item,index) in list" style="background: #fff;padding: 24rpx 0;margin-top: 1rpx;margin-bottom: 12rpx;">
				<view class="" style="margin: 0 32rpx;font-size: 30rpx;color: #262626;">
					{{item.content}}
				</view>
				<view v-if="status2==2||status2==3" class=""
					style="margin: 20rpx 32rpx;border-radius: 12rpx;background: #FBFBFB;display: flex;overflow: hidden;">
					<view class="" style="font-size: 0;">
						<image style="width: 96rpx;height: 96rpx;border-radius: 12rpx;" :src="ImgUrl+item.order.items[0].goods.img[0]" mode=""></image>
					</view>
					<view class="" style="flex: 1;font-size: 24rpx;flex-shrink: 0;">
						<view class="line-1" style="margin: 10rpx 30rpx;color: #262626;width: 520rpx;">
							{{item.order.items[0].goods.name}}
						</view>
						<view class="" style="margin: 0 30rpx;color: #999;">
							<!-- 红色/L -->
						</view>
					</view>
				</view>
				<view v-else class=""
					style="margin: 20rpx 32rpx;border-radius: 12rpx;background: #FBFBFB;display: flex;overflow: hidden;">
					<view class="" style="font-size: 0;">
						<image style="width: 96rpx;height: 96rpx;border-radius: 12rpx;" :src="ImgUrl+item.doctor.avatar" mode=""></image>
					</view>
					<view class="" style="flex: 1;font-size: 24rpx;flex-shrink: 0;">
						<view class="line-1" style="margin: 10rpx 30rpx;color: #262626;width: 520rpx;">
							{{item.doctor.name}}
						</view>
						<view class="" style="margin: 0 30rpx;color: #999;">
							<!-- 红色/L -->
						</view>
					</view>
				</view>
				<view class=""
					style="margin: 0 32rpx;display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #999;">
						{{item.created_at}}
					</view>
					<!-- <view class="" style="padding: 12rpx 40rpx;border-radius: 60rpx; border: 1px solid #CCC;font-size: 24rpx;color: #333;">
					删除
				</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		comment
	} from '@/api/common.js'
	import getScrollHeight from "@/utils/utils.js"
	export default {
		data() {
			return {
				list2: [
					// {
					// 	id:1,
					// 	name: '课程订单'
					// },
					{
						id: 1,
						name: '会诊订单'
					},
					{
						id: 2,
						name: '商城订单'
					},
					{
						id: 3,
						name: '积分订单'
					}
				],
				status2: 1, //
				page: 1,
				last_page: 0,
				list: [],
				scrollH:'',
			}
		},
		onLoad() {
			this.getcomment();
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 10
			})	
		},
		computed:{
			ImgUrl(){
				return this.$store.state.ImgUrl
			}
		},
		methods: {
			scrolltolower(){
				this.page++;
				this.getcomment();
			},
			getcomment() {
				let data = {
					type: this.status2,
					page: this.page
				}
				comment(data).then(res => {
					console.log(res, 'cs');
					this.last_page  = res.data.last_page;
					if(this.page==1){
						this.list = res.data.data;
					}else{
						if(res.data.data==0){
							
						}
					}
				})
			},
			tabs_click2(e) {
				if (this.status2 == e.id) {
					return;
				}
				this.status2 = e.id;
				this.list = [];
				this.page = 1;
				this.getcomment();
			},
		}
	}
</script>
<style>
	page {
		background: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	.tabs {
		background: #fff;
	}
</style>